<template>
    <div class="route-list" v-loading="loading">
        <el-input
            placeholder="请输入您要搜索的内容"
            style="width:200px;margin-right:10px;"
            @keyup.enter.native="search"
            clearable
            v-model.trim="keyword">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" class="btn" @click="search">搜索</el-button>
        <el-button type="success" class="btn" @click="createRoute">新建</el-button>

        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 800px">
                <el-table-column
                    width="100"
                    prop="gameid"
                    label="id">
                </el-table-column>
                <el-table-column
                    prop="gameid"
                    label="页面名称">
                </el-table-column>
                <el-table-column
                    prop="gameid"
                    label="跳转目标">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                        <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            :title="title"
            class="route-edit"
            :visible.sync="showEidt"
            width="500px">
            <el-form ref="form" class="input-no-border-box" :model="currentItem" label-width="auto">
                <el-form-item label="跳转目标">
                    <el-select v-model="currentItem.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="页面名称">
                    <el-input v-model="currentItem.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showEidt = false">取 消</el-button>
                <el-button type="primary" @click="showEidt = false">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            tableData: [{}, {}],
            keyword: '',
            currentItem: {},
            title: '新建', // 弹窗标题
            showEidt: false // 弹窗添加或编辑
        }
    },
    created () {
        this.search()
    },
    methods: {
        // 查询
        async search () {
            this.loading = false
        },

        // 新建
        createRoute () {
            this.currentItem = {}
            this.showEidt = true
        },

        // 删除
        del (item) {
        },

        // 编辑
        edit (item) {
            this.currentItem = item
            this.showEidt = true
        }
    }
}
</script>

<style lang="scss" scoped>
    .route-list {
        .table-box {
            margin-top: 10px;
        }

        .route-edit {
            /deep/ .el-dialog__body {
                padding: 0 20px;
            }
        }
    }
</style>
